<template>
  <el-card class="card-body">
    <el-row>
      <el-table :data="tableData" class="table-body" :header-cell-style="{background:'#F4F6F9',color:'#1D2129'}">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="articleTitle" label="标题" width="220">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleCheck(scope.row.articleId)">{{
                scope.row.articleTitle
              }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="moduleName" label="所属栏目" width="220"></el-table-column>
        <el-table-column prop="updateDate" label="时间"></el-table-column>
        <el-table-column prop="userName" label="作者"></el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handlePass(scope.row.articleId)">通过</el-button>
            <el-button type="text" @click="handleReject(scope.row.articleId)">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :count="Number(count)" :current="1" @handleSizeChange="handleSizeChange"
                  @handleCurrentChange="handleCurrentChange"/>
    </el-row>
  </el-card>
</template>

<script>
// import SearchForm from './components/SearchForm';
// import DataTables from './components/DataTables';
import { getArticleApi, operationArticleApi } from "@/api/modules/article.api";
import Pagination from "@/components/Pagination.vue";

export default {
  components: {
    Pagination
  },
  data() {
    return {
      tableData: [],
      count: 0,
      page: {
        pageNum: 1,
        pageSize: 10,
        status: 2
      }
    };
  },
  mounted() {
    this.getTableData(this.page)
  },
  methods: {
    async getTableData({pageNum = 1, pageSize = 10, ...data}) {
      const res = await getArticleApi({pageNum, pageSize, ...data})
      this.tableData = res.records
      this.count = res.total
    },
    async handlePass(id) {
      await operationArticleApi({articleId: id,status: 3})
      await this.getTableData(this.page)
    },
    async handleReject(id){
      await operationArticleApi({articleId: id,status: 4})
      await this.getTableData(this.page)
    },
    async handleCheck(id) {
      this.$router.push({ name: "/writings/list/check", query: { id,type: '1' } });
      this.setBreadcrumb([
        {
          name: "文章管理",
          path: "/writings",
        },
        {
          name: "文章列表",
          path: "/writings/list",
        },
        {
          name: "查看",
          path: "/writings/list/check",
        },
      ]);
    },
    handleSizeChange(pageSize) {
      this.page.pageNum = pageSize;
      this.$emit("getTableData", this.page);
    },
    handleCurrentChange(pageNum) {
      this.page.pageNum = pageNum;
      this.$emit("getTableData", this.page);
    },
  },
}
</script>
